import React, { useState, useEffect } from 'react'
// 引入 ECharts 主模块

import * as echarts from 'echarts';
import Styles from './index.css'


const defaultOption = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};
const Index = () => {
    const [chart, setChart] = useState('')
    console.log("echarts", echarts)
    const resize = () => {
        chart && chart.resize();
    }
    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_AnnualSalary'));
        setChart(myChart)
        // 绘制图表
        myChart.setOption(defaultOption);
        window.addEventListener('resize', resize);
    }, [])
    return <>
        <div className='pane-title'>
            折线图-薪资分布
        </div>
        <div className={Styles.chart} id='chart_AnnualSalary' style={{ height: '100%', width: '100%' }} ></div>
    </>
}

export default Index